<template>
  <view class="screenshot_tutorial">
    <!-- 示例 -->
    <view class="lieZi">
      <view v-if="ScreenshotType == 'all' || ScreenshotType == 'evaluate'">
        <view class="pz_eg">
          <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
          <text>评价截图示例</text>
          <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
        </view>
        <view class="img_box">
          <image class="comment_img" :src="orderDetail?.example_comment_img" mode="widthFix" @tap="previewImage"
                 :data-src="orderDetail?.example_comment_img"></image>
        </view>
      </view>
      <view v-if="ScreenshotType == 'all' || ScreenshotType == 'order'">
        <view class="pz_eg">
          <image class="little_left" :src="BaseImgUrl + '/images/little_left.png'"></image>
          <text>订单凭证示例</text>
          <image class="little_right" :src="BaseImgUrl + '/images/little_right.png'"></image>
        </view>
        <view class="img_box">
          <image class="comment_img" :src="orderDetail?.example_order_img" mode="widthFix" @tap="previewImage"
                 :data-src="orderDetail?.example_order_img"></image>
          <image class="comment_img" :src="orderDetail?.example_pay_img" mode="widthFix" @tap="previewImage"
                 :data-src="orderDetail?.example_pay_img"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
import {onLoad, onShow} from "@dcloudio/uni-app";
import {BaseImgUrl} from "../utils/lshttp";
import {orderDetailsAPI} from "../services/order";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
const commonInfoStore = useCommonInfoStore()

const ScreenshotType = ref('all')
const orderId = ref()
const orderDetail = ref()
const address = ref()// 获取定位信息
onLoad(async (options) => {
  // 获取坐标
  address.value = commonInfoStore.address
  console.log("addressDel = ", address.value)
  ScreenshotType.value = options.type
  orderId.value = options.orderId
  const res = await orderDetailsAPI(orderId.value, address.value.latitude, address.value.longitude)
  console.log("订单详情 = ", res.result)
  orderDetail.value = res.result
  if (ScreenshotType.value == 'all'){
    banner_imgs.value = [res.result?.example_comment_img, res.result?.example_order_img, res.result?.example_pay_img]
  } else if (ScreenshotType.value == 'evaluate'){
    banner_imgs.value = [res.result?.example_comment_img]
  } else if (ScreenshotType.value == 'order'){
    banner_imgs.value = [res.result?.example_order_img, res.result?.example_pay_img]
  }

})
const banner_imgs = ref([])
const previewImage = (e) => {
  const current = e.currentTarget.dataset.src;
  uni.previewImage({
    current: current,
    // 当前显示图片的http链接
    urls: banner_imgs.value // 需要预览的图片http链接列表
  });
}


</script>
<style scoped lang="scss">
pages{
  background-color: #f5f5f5;
  height: 100%;
  width: 100%;
}
.screenshot_tutorial{
  width: 100%;
  height: 100%;
}
/* 示例 */
.lieZi {
  width: 100%;
  height: auto;
  padding-bottom: 100rpx;
}

.lieZi > view {
  height: auto;
  text-align: center;
  background-color: white;
  padding: 20rpx 0;
  border-radius: 10px;
  margin: 10px;
}

.lieZi view > .pz_eg {
  display: flex;
  font-size: 32rpx;
  line-height: 28rpx;
  text-align: center;
  color: rgba(17, 17, 17, 1);
  font-weight: bold;
  margin: 0 auto 20rpx;
  justify-content: center;
  box-sizing: border-box;
  padding: 40rpx 0;
  align-items: center;
}

.lieZi view > .pz_eg .little_left {
  width: 70rpx;
  height: 40rpx;
}

.lieZi view > .pz_eg .little_right {
  width: 70rpx;
  height: 40rpx;
}

.img_box {
  box-sizing: border-box;
  padding: 0 30rpx;
  border-radius: 20rpx;
  overflow: hidden;

  image {
    margin-bottom: 20rpx;
  }
}

.lieZi view > .pz_eg text {
  margin: 0 10rpx;
}

.lieZi view image {
  width: 100%;
  height: 470rpx;
}

.lieZi > view {
  margin-top: 10rpx;
}
</style>
